<template>
	<view class="container">

		<carHeader style="padding:10rpx;" :title="'维修任务'">
		</carHeader>

		<view class="top">
			<input type="text" placeholder="输入需要搜索的内容" v-model="searchQuery" />
			<image src="/static/车联网服务商家端-03核销记录_slices/搜索.png"></image>
			<view class="one">
				<text>共{{total}}条</text>
			</view>
			<view class="one">
				<text>状态</text>
			</view>
			<view class="one">
				<text>维修方式</text>
			</view>
			<view class="two" style="margin-left: 10px;">
				<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
					:insert="info.insert" :lunar="info.lunar" :startDate="info.startDate" :endDate="info.endDate"
					:range="info.range" @confirm="confirm" @close="close" />
				<u-icon name="calendar" color="#ffffff" @click="open"></u-icon>
			</view>

			<view class="two">
				<text>日期</text>
			</view>

			<view class="dropdown">
				<!-- 触发下拉的按钮或视图 -->
				<view class="dropdown-trigger" @click="toggleDropdown">
					{{ selected || '全部' }}
					<view class="arrow" :class="{ 'arrow-up': isDropdownVisible }">
						<u-icon name="arrow-down" size="20rpx" color="#fff"></u-icon>
					</view>
				</view>

				<!-- 下拉列表，使用v-show控制显示隐藏 -->
				<view class="dropdown-content" v-show="isDropdownVisible">
					<scroll-view scroll-y="true" style="height: 200px;">
						<view class="dropdown-item" v-for="(item, index) in range" :key="index"
							@click="selectItem(item)">
							{{ item }}
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="dropdown">
				<!-- 触发下拉的按钮或视图 -->
				<view class="dropdown-trigger" @click="toggleDropdown2">
					{{ selected2 || '全部' }}
					<view class="arrow" :class="{ 'arrow-up': isDropdownVisible2 }">
						<u-icon name="arrow-down" size="20rpx" color="#fff"></u-icon>
					</view>
				</view>

				<!-- 下拉列表，使用v-show控制显示隐藏 -->
				<view class="dropdown-content" v-show="isDropdownVisible2">
					<scroll-view scroll-y="true" style="height: 200px;">
						<view class="dropdown-item" v-for="(item, index) in method" :key="index"
							@click="selectItem2(item)">
							{{ item }}
						</view>
					</scroll-view>
				</view>
			</view>

		</view>

		<view class="repair" v-for="(item,index) in repairForm" :key="index">
			<view class="number">
				<text>维修单号：{{item.ddNumber}}</text>
				<view>
					<text>{{item.status}}</text>
				</view>

			</view>
			<view class="info">维修方式：{{item.serviceNames}}</view>


			<view class="info">预约日期：{{item.ddYuyueTime}}</view>
			<view class="btn">
				<u-button @click="change(item)" type="primary" :color="'#0662E6'" shape="circle">
					查看详情</u-button>

			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 获取任意时间
	 */
	function getDate(date, AddDayCount = 0) {
		if (!date) {
			date = new Date()
		}
		if (typeof date !== 'object') {
			date = date.replace(/-/g, '/')
		}
		const dd = new Date(date)

		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

		const y = dd.getFullYear()
		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
		return {
			fullDate: y + '-' + m + '-' + d,
			year: y,
			month: m,
			date: d,
			day: dd.getDay()
		}
	}
	export default {
		data() {
			return {
				// list:[],
				// 订单的状态是空的
				status: null,
				beginDdYuyueTime: null,
				endDdYuyueTime: null,
				serviceSortId: null,
				searchQuery: '', // 绑定到输入框的数据
				total: '3', //总条数
				info: { //日历信息
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				isDropdownVisible: false, // 控制下拉框的显示隐藏
				selected: 0, // 当前选中的项  
				isDropdownVisible2: false, // 控制下拉框的显示隐藏
				selected2: null, // 当前选中的项  
				range: ['全部', '待付款', '待核销', '已完成', '已退款', '已取消'], // 状态下拉列表的选项  
				method: ['全部', '汽车维修', '汽车保养', '专业洗车'], //维修方式下拉列表的选项  
				//维修信息列表
				repairForm: []

			};
		},
		created() {
			uni.request({
				url: 'http://localhost:8080/shop/weixiurenwu/list',
				method: 'POST',
				data: {},
				success: (res) => {
					this.repairForm = res.data.rows;
					console.log(this.repairForm)
				},
			});
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			open() { //打开日历
				this.$refs.calendar.open()
			},
			close() { //关闭日历
				console.log('弹窗关闭');
			},
			confirm(e) { //日历点击确定按钮返回日期
				console.log('confirm 返回:', e);
				console.log(e.range.after);
				console.log(e.range.before);
				// 将字符串转换为Date对象
				const date1 = new Date(e.range.after.replace(/-/g, "/"));
				const date2 = new Date(e.range.before.replace(/-/g, "/"));

				// 比较两个日期
				if (date1 > date2) {
					console.log("date1 is after date2");
					this.endDdYuyueTime = date1;
					this.beginDdYuyueTime = date2;
					console.log(this.endDdYuyueTime);
					console.log(this.beginDdYuyueTime);
				} else if (date1 < date2) {
					console.log("date1 is before date2");
					this.beginDdYuyueTime = date1;
					this.endDdYuyueTime = date2;

				} else {
					console.log("date1 is the same as date2");
					this.beginDdYuyueTime = date1;
					this.endDdYuyueTime = date2;
				};
				uni.request({
					url: 'http://localhost:8080/shop/weixiurenwu/list',
					method: 'POST',
					data: {
						status: this.status,
						serviceSortId: this.serviceSortId,
						beginDdYuyueTime: this.beginDdYuyueTime,
						endDdYuyueTime: this.endDdYuyueTime
					},
					success: (res) => {
						this.repairForm = res.data.rows;
						console.log(this.repairForm)

					},
				});
			},
			// change(e) {
			//     console.log("e:", e);
			// },
			// 切换状态下拉框的显示隐藏状态
			toggleDropdown() {
				this.isDropdownVisible = !this.isDropdownVisible;
			},
			// 状态选择下拉项  
			selectItem(item) {
				this.selected = item; // 更新选中项  
				this.isDropdownVisible = false; // 关闭下拉框 
				// range: ['全部', '待付款', '待核销','已完成','已退款','已取消'],
				if (item === "全部") {
					this.status = null;
					console.log(this.status);
				}
				if (item === "待付款") {
					this.status = 0;
					console.log(this.status);
				}
				if (item === "待核销") {
					this.status = 1;
					console.log(this.status);
				}
				if (item === "已完成") {
					this.status = 2;
					console.log(this.status);
				}
				if (item === "已退款") {
					this.status = 3;
					console.log(this.status);
				}
				if (item === "已取消") {
					this.status = 4;
					console.log(this.status);
				}
				uni.request({
					url: 'http://localhost:8080/shop/weixiurenwu/list',
					method: 'POST',
					data: {
						status: this.status,
						serviceSortId: this.serviceSortId
					},
					success: (res) => {
						this.repairForm = res.data.rows;
						console.log(this.repairForm)

					},
				});
			},
			// 切换维修方式下拉框的显示隐藏状态
			toggleDropdown2() {
				this.isDropdownVisible2 = !this.isDropdownVisible2;
			},
			// 维修方式选择下拉项  
			selectItem2(item) {
				this.selected2 = item; // 更新选中项  
				this.isDropdownVisible2 = false; // 关闭下拉框  
				// method:['全部', '汽车维修', '汽车保养','专业洗车']
				if (item === "全部") {
					this.status = null;
					console.log(this.status);
				}
				if (item === "汽车维修") {
					this.status = 0;
					console.log(this.status);
				}
				if (item === "汽车保养") {
					this.status = 1;
					console.log(this.status);
				}
				if (item === "专业洗车") {
					this.status = 2;
					console.log(this.status);
				}
				uni.request({
					url: 'http://localhost:8080/shop/weixiurenwu/list',
					method: 'POST',
					data: {
						status: this.status,
						serviceSortId: this.serviceSortId
					},
					success: (res) => {
						this.repairForm = res.data.rows;
						console.log(this.repairForm)

					},
				});
			},
			change(obj) {
				// const obj = {
				// 	item
				// };
				console.log("---------------");
				console.log(obj);
				console.log(obj);
				const url = `/pages/repairDetails/repairDetails?data=${encodeURIComponent(JSON.stringify(obj))}`;
				uni.navigateTo({
					url: url
				});
			// 	uni.navigateTo({
			// 		url: '/pages/repairDetails/repairDetails?obj=${obj}',
			// 		events: {
			// 		    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
			// 		    acceptDataFromOpenedPage: function(data) {
			// 		      console.log(data)
			// 		    },
			// 		    someEvent: function(data) {
			// 		      console.log(data)
			// 		    },
			// 		  },
			// 		  success: function(res) {
			// 		    // 通过eventChannel向被打开页面传送数据
			// 		    res.eventChannel.emit('acceptDataFromOpenerPage', { data: obj })
			// 		  }
					
			// 	});
			// 	console.log(item.ddId);
			
			}


		}
	}
</script>

<style lang="scss">
	.top {
		// background-color: pink;
		margin-top: -120px;

		input {
			background-color: #fff;
			padding: 10px 10px;
			border-radius: 50px;
			width: 80%;
			margin: 0 auto;
			font-size: 13px;
			color: gray;
		}

		image {
			width: 14px;
			height: 14px;
			float: right;
			margin-top: -30px;
			margin-right: 50px;
		}

		.one {
			color: #fff;
			display: inline-block;
			margin: 10px 30px;
			font-size: 13px;
		}

		.two {
			color: #fff;
			display: inline-block;
			// margin-left: 10px;
			font-size: 13px;
		}

	}

	.repair {
		background-color: white;
		height: 270rpx;
		width: 95%;
		// position: absolute;
		margin-top: 10px;
		margin-left: 20rpx;
		border-radius: 20rpx;

		// z-index: 1;
		.number {
			padding-top: 30rpx;
			padding-bottom: 20rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			// background-color: pink;
			border-bottom: 5px solid #F9F9F9;

			view {
				float: right;
				font-size: 12px;
				color: #5D9CF9;
			}
		}

		.info {
			margin: 30rpx 30rpx;
			font-size: 13px;
		}

		.btn {
			width: 30%;
			position: relative;
			top: -60px;
			right: -240px;

		}
	}

	.dropdown {
		display: inline-block;
		position: relative;
		left: 70px;
		margin-left: 5px;
		width: 28%;
		/* 调整宽度 */
		border-radius: 50px;
	}

	.dropdown-trigger {
		padding: 5px 20px;
		font-size: 12px;
		background-color: rgba(0, 0, 0, 0.1);
		// border: 1px solid #ddd;  
		border-radius: 40px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #fff;
	}

	.dropdown-content {
		position: absolute;
		top: 100%;
		/* 紧接在触发按钮下方 */
		left: 0;
		right: 0;
		color: gray;
		// height: 120px;
		font-size: 12px;
		border-radius: 20px;
		background-color: rgba(0, 0, 0, 0.1);
		// border: 1px solid #ddd;  
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		z-index: 1;
	}

	.dropdown-item {
		padding: 10px;
		border-bottom: 1px solid #eee;
		cursor: pointer;
	}

	.dropdown-item:last-child {
		border-bottom: none;
	}

	.arrow {
		transition: transform 0.2s;
	}

	.arrow-up {
		transform: rotate(180deg);
	}
</style>